<template>
	<view>
		<uni-section :title="title" type="line">
			<view class="uni-ma-4 my-btn">
				<u-button type="primary" size="mini" @click="openDepart()">选择部门</u-button>
			</view>
			<slot name="s1"></slot>
			<view class="uni-container">
				<view class="uni-ma-3">
					<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="请输入员姓名"
						@iconClick="searchName">
					</uni-easyinput>
				</view>
				<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">操作</uni-th>
						<uni-th align="center">账号</uni-th>
						<uni-th align="center">姓名</uni-th>
						<uni-th align="center">所属部门</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td width="150" align="center">
							<view class="my-btn">
								<u-button :type="getButtonType(item)" size="mini"
									@click="dofoucs(item.id,item)">{{getButtonText(item)}}</u-button>
							</view>
						</uni-td>
						<uni-td width="150" align="center">
							<view>
								{{item.account}}
							</view>
						</uni-td>
						<uni-td width="150" align="center">
							<view>
								{{item.name}}
							</view>
						</uni-td>
						<uni-td width="200" align="center">
							<view>
								{{item.departNames}}
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-mb-5 uni-mt-5">
					<uni-pagination :total="total" :pageSize="params.size" prev-text="前一页" next-text="后一页"
						@change="doChangePage" />
				</view>
			</view>
		</uni-section>
		<slot name="s2"></slot>
		<view>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="uni-ma-3">
							<u-button type="warning" size="mini" @click="closeDrawer('showRight')">关闭</u-button>
						</view>
						<view class="info-content">
							<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
								defaultExpandAll showCheckbox @change="handleTreeChange"></DaTree>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		inject,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import DaTree from '@/components/da-tree/index.vue'
	const http = inject("$http");
	const tableData = ref([]);
	const roomTreeData = ref([]);
	const showRight = ref();
	const myuToast = ref();
	const params = ref({
		page: 1,
		size: 6
	})
	const total = ref(0);
	const searchValue = ref();
	const loading = ref(false);
	const allsubmitkeys = ref([]);
	const foucsIds = reactive([]);
	const foucsItems = reactive([]);
	const inputName = ref("");
	const props = defineProps({
		selectedItems: {
			type: Array,
			default: []
		},
		title: {
			type: String,
			default: "新增分组"
		}
	})

	onMounted(() => {})

	onLoad(() => {})

	onShow(() => {
		loading.value = true;
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	})
	//以姓名查找
	function searchName() {
		loading.value = true;
		params.value.name = searchValue.value;
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}

	function doChangePage(e) {
		loading.value = true;
		params.value.page = e.current;
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}
	//点击
	function dofoucs(id, item) {
		console.log("props.selectedItems");
		console.log(props.selectedItems);
		console.log("foucsIds");
		console.log(foucsIds);
		console.log("foucsItems");
		console.log(foucsItems);
		if (foucsIds.includes(id)) {
			console.log("---11111---");
			let index = foucsIds.indexOf(id);
			console.log(index);
			if (index > -1) {
				foucsIds.splice(index, 1);
				foucsItems.splice(index, 1);
			}
			console.log("---11111---");
		} else {
			console.log("----22222----");
			foucsIds.push(id);
			foucsItems.push(item);
			console.log("----22222----");
		}
		console.log(foucsItems);
		console.log(foucsIds);
		props.selectedItems.splice(0, props.selectedItems.length);
		props.selectedItems.push(...foucsItems);
	}
	//选择部门
	function openDepart() {
		showRight.value.open();
		http.post("/depart/getAll").then((res) => {
			if (res && res.data && res.data.code == 1) {
				roomTreeData.value = res.data.data;
			}
		}).catch((re) => {
			console.log(re)
		});
	}

	function closeDrawer() {
		loading.value = true;
		showRight.value.close();
		params.value.id = allsubmitkeys.value.join(",")
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}

	function handleTreeChange(allSelectedKeys, currentItem) {
		allsubmitkeys.value = allSelectedKeys;
		console.log('handleTreeChange ==>', allSelectedKeys)
	}

	watch(props.selectedItems, (newValue, oldValue) => {
		newValue.forEach(item => {
			foucsIds.push(item.userId);
			// foucsItems.push(item);
		})
	})
	/**
	 * 得到按钮的种类
	 * @param {Object} item
	 */
	function getButtonType(item) {
		if (foucsIds.includes(item.id)) {
			return 'error'
		} else {
			return 'primary'
		}
	}

	function getButtonText(item) {
		if (foucsIds.includes(item.id)) {
			return '解除'
		} else {
			return '选择'
		}
	}

	watch(props.selectedItems, (newValue, oldValue) => {
		console.log("newValue");
		console.log(newValue);
		foucsIds.splice(0, foucsIds.length);
		foucsItems.splice(0, foucsItems.length);

		props.selectedItems.forEach(item => {
			foucsIds.push(item.userId);
			foucsItems.push(item);
			console.log(item);
		})
		// console.log(foucsIds);
		// console.log(foucsItems);
	})
</script>

<style>
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.my-btn {
		width: 180rpx;
	}
</style>